import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect
} from 'react-router-dom'
import { getToken } from './serve/token'
import Home from './components/home'
import Login from './components/login'
import Detail from './components/main/detail'
import Cal from './components/main/cal'
import Map from './components/main/map'

// 用此方法设置路由守卫
const Beforelogin = () => {
  return (
    <Route
      exact
      path="/"
      render={() => {
        const token = getToken()
        const com = token ? <Home /> : <Redirect to="/login" />
        return com
      }}
    ></Route>
  )
}

function AppRouter() {
  return (
    <Router>
      <div>
        {/* <Link to="/">home</Link> */}
        {/* <Link to="/login">login</Link> */}
        <Switch>
          {/* <Route exact path="/" component={Home}></Route> */}
          <Route path="/login" component={Login}></Route>
          <Route path="/detail" component={Detail}></Route>
          <Route path="/cal" component={Cal}></Route>
          <Route path="/map" component={Map}></Route>
          <Beforelogin />
          <Redirect to="/" />
        </Switch>
      </div>
    </Router>
  )
}
export default AppRouter
